<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几何图形</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    
</body>
    <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
    <script>
        var canvas = document.getElementById('canvas');

        //将Canvas绑定到 renderer
        var renderer = new THREE.WebGLRenderer({canvas});

        var width = canvas.clientWidth;
        var height = canvas.clientHeight;

        //将渲染的大小设为与Canvas相同
        renderer.setSize(width, height); 

        //设置默认颜色与透明度 16进制 
        renderer.setClearColor(0xFFFFFF, 1.0); 

        // 创建场景
        var scene = new THREE.Scene()


        // 透视投影照相机  THREE.PerspectiveCamera(fov, aspect, near, far)  
        var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);

        // 设置照相机偏移
        camera.position.set(0, 0, 5);

        // 添加照相机到场景中
        scene.add(camera);

        // 立方体：THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
        var geometry1 = new THREE.CubeGeometry(1, 2, 3, 2, 2, 3)  // 分段
        var geometry2 = new THREE.CubeGeometry(1, 1, 1) 
        
        // 平面 THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
        var geometry3 = new THREE.PlaneGeometry(2, 4)

        // 球体 THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
        var geometry4 = new THREE.SphereGeometry(1, 8, 6) // 半径为1，经度划分成8份，纬度划分成6份的球体

        // 圆环面
        var geometry5 = new THREE.TorusGeometry(1.1, 0.5, 12, 18) 


        var color = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: true})  // 图形材质

        // var color = new THREE.MeshLambertMaterial({color: 0xffff00})

        var cube1 = new THREE.Mesh(geometry1,color);
        var cube2 = new THREE.Mesh(geometry2,color);
        var cube3 = new THREE.Mesh(geometry3,color);
        var cube4 = new THREE.Mesh(geometry4,color);
        var cube5 = new THREE.Mesh(geometry5,color);
     
        // 添加正方体到场景中
        // scene.add(cube1);
        // scene.add(cube2);
        // scene.add(cube3);
        // scene.add(cube4);
        scene.add(cube5);

        // 渲染
        renderer.render(scene, camera);


    </script>
</html>